<template>
    <div class="home-wrapper">
        <project-menu :detail="projectDetail" :pid="projectId"></project-menu>
        <div class="filters-wrapper">
            <div class="title total_title">
                <span>广告组<font class="total_title_back" @click="$router.go(-1)">/ 返回上一级</font></span>
            </div>
            <el-row type="flex" align="middle" style="flex-wrap: wrap;margin-bottom: 5px;position: relative;">
                <div class="form-wrapper" style="width: 300px;">
                    <el-input placeholder="请输入广告组名称" size="small" v-model="jd_search" class="input-with-select">
                        <el-button @click="loadAdgroup({page: 1})" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
                <div class="form-wrapper">
                    <el-button size="small" @click="toggleSelection(adgroupdata)">全选</el-button>
                    <el-button v-if="isAdmin && projectDetail.status == 1" size="small" type="danger" @click="delSelect">删除</el-button>
                </div>
                <div class="form-wrapper">
                    <router-link v-if="isAdmin && projectDetail.status == 1" :to="{path:'/newgroup/' + projectId + '/' + accountId + '/' + advertiser_id + '/0'}">
                        <el-button size="small" type="primary">新建广告组</el-button>
                    </router-link>
                </div>
            </el-row>
            <el-table :data="adgroupdata" border
                :header-cell-style="{'text-align':'center','background':'#f7f7f7','color':'#666'}"
                style="width: 100%;margin-top: 10px" @selection-change="handleSelectionChange" ref="multipleTable">
                <el-table-column type="selection" width="55" align="center">
                </el-table-column>
                <el-table-column prop="campaign_name" label="广告组名称" align="center">
                </el-table-column>
                <el-table-column prop="update_time" label="更新时间" align="center">
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                    <template slot-scope="scope">
                     <a @click="openAdgroupDetail(scope.row)">{{scope.row.status}}</a>
                    </template>
                </el-table-column>
                <el-table-column prop="operation" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.is_update && projectDetail.status == 1" @click="copy(scope.row)" size="mini">复制</el-button>
                        <router-link v-if="scope.row.is_update && projectDetail.status == 1" :to="{path:'/newgroup/' + projectId + '/' + accountId + '/' + advertiser_id + '/' + scope.row.id}">
                            <el-button style="margin-left: 5px;" size="mini" type="primary">修改</el-button>
                        </router-link>
                        <el-button v-if="scope.row.is_update && projectDetail.status == 1" style="margin-left: 5px;" size="mini" type="danger" @click="delClick(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row type="flex" justify="end" style="margin-top: 20px">
            </el-row>
            <el-row type="flex" justify="end" style="margin-top: 20px;">
                <el-pagination background layout="prev, pager, next" :total="total" :current-page.sync="curPage" :page-size="pageSize"
                    @current-change="handleCurrentChange($event)">
                </el-pagination>
            </el-row>
            <!-- 分割线 -->
            <el-dialog title="计划状态" :visible.sync="adplanstate" width="800" center v-loading="loadingDetail">
                <el-row type="flex" align="middle" justify="center">
                    <el-table :data="adplandata" border
                        :header-cell-style="{'text-align':'center','background':'#f7f7f7','color':'#666'}"
                        style="width: 100%;margin-top: 10px">
                        <el-table-column prop="adplan_num" label="生成计划数量" align="center">
                        </el-table-column>
                        <el-table-column prop="success_num" label="上传成功数量" align="center">
                        </el-table-column>
                        <el-table-column prop="failure_num" label="上传失败数量" align="center">
                        </el-table-column>
                        <el-table-column prop="failure_cause" label="失败原因" align="center">
                        </el-table-column>
                    </el-table>
                </el-row>
                <el-row type="flex" align="middle" justify="center" style="margin-top:15px;">
                    <el-button size="small" type="primary" @click="adplanstate = false">关闭</el-button>
                </el-row>
            </el-dialog>

        </div>
    </div>
</template>

<script>
    import {
        pageParams, isAdmin
    } from '@/settings'
    export default {
        data() {
            return {
                loadingDetail: false,
                projectId: 0,
                accountId: 0,
                advertiser_id: 0,
                pageSize: pageParams.pageSize,
                curPage: 1,
                total: 0,
                projectDetail: {},
                jd_search: '',
                adgroupdata: [],
                multipleSelection: [],
                adplanstate:false,
                adplandata: [{
                        adplan_num: 0,
                        success_num: 0,
                        failure_num: 0,
                        failure_cause: ''
                    }
                ],
                isAdmin: false,
            }
        },
        created() {
            this.projectId = this.$router.currentRoute.params.id
            this.accountId = this.$router.currentRoute.params.aid
            this.advertiser_id = this.$router.currentRoute.params.advid
        },
        mounted() {
            this.isAdmin = isAdmin(this.$store.state.user.id_role)
            
            this.loadData()
        },
        methods: {
            loadData() {
                this.$axios.get('/project/detail', {
                        projectid: this.projectId
                    })
                    .then(e => {
                        this.projectDetail = e.data
                        if (!this.isAdmin) {
                            this.isAdmin = this.projectDetail.id_manager == this.$store.state.user.uid
                        }
                    })
                this.loadAdgroup({})
            },
            loadAdgroup(param) {
                param['number'] = this.pageSize
                param['projectid'] = this.projectId
                param['accountid'] = this.accountId
                param['keyword'] = this.jd_search
                if (!param['page']) {
                    param['page'] = this.curPage
                }
                this.$axios.get('/project/adgroup', param)
                    .then(e => {
                        this.adgroupdata = e.data.items
                        this.total = e.data.total
                        if (!this.isAdmin && this.adgroupdata.findIndex(e => e.is_update == 1) != -1) {
                            this.isAdmin = true
                        }
                    })
            },
            handleCurrentChange(val) {
                this.curPage = val
                this.loadAdgroup({
                    page: val
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row)
                    });
                } else {
                    this.$refs.multipleTable.clearSelection()
                }
            },
            copy(item) {
                let param = {
                    id: item.id
                }
                this.$confirm('此操作将复制该项, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post('/adgroup/copy', param)
                        .then(() => {
                            this.loadAdgroup({})
                            this.$message({
                                type: 'success',
                                message: '复制成功!'
                            })
                        })
                }).catch(() => {})
            },
            modify(item) {
                this.$router.push({
                    path: '/newgroup/' + this.projectId + '/' + this.accountId + '/' + item.id
                })
            },
            openAdgroupDetail(item) {
                this.loadingDetail = true
                this.adplanstate = true
                // console.log('item', item)
                this.$axios.get('/adgroup/status', {id: item.id})
                    .then((e) => {
                        this.loadingDetail = false
                        if (Array.isArray(e.data)) {
                            this.adplandata = e.data
                        } else {
                            this.adplandata = [e.data]
                        }
                    })
            },
            delSelect() {
                if (this.multipleSelection.length <= 0) {
                    this.$message({
                        type: 'error',
                        message: '没有选择项目!'
                    })
                    return
                }
                this.delClick(this.multipleSelection, '1')
            },
            delClick(items,isall) {
                // let ids = []
                // for (const v in items) {
                //     ids.push(items[v].id)
                // }
                var ids;
                if (isall == "1") {
                    ids = [];
                    for (const v in items) {
                        ids.push(items[v].id)
                    }
                } else {
                    ids = items.id;
                }
                let param = {
                    ids: ids
                }
                this.$confirm('此操作将删除该项, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post('/adgroup/delete', param)
                        .then(() => {
                            this.loadAdgroup({})
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                        })
                }).catch(() => {})
            }
        }
    }
</script>
